<template>
	<view class="container">
		<view class="card-form">
			<uni-forms ref="formCard" :rules="rules" :modelValue="formData" label-position="top">
				<uni-forms-item label="新卡名" required name="name">
					<uni-easyinput v-model="formData.name" placeholder="请输入新卡名" />
				</uni-forms-item>
				<uni-forms-item label="计卡格数" required name="count">
					<uni-easyinput v-model="formData.count" />
				</uni-forms-item>
				<uni-forms-item label="有效期" required name="validity">
					<uni-data-checkbox v-model="formData.validity" :localdata="validitys" @change="changeValidity" />
				</uni-forms-item>
				<uni-forms-item label="底部文字" required name="bottomTitle">
					<uni-easyinput v-model="formData.bottomTitle" />
				</uni-forms-item>
			</uni-forms>
			<button type="primary" @click="submit">制卡</button>
		</view>
		<uni-section title="效果图" type="line">
			<xdcard :cardData="formData"></xdcard>
		</uni-section>
	</view>
</template>

<script>
	import xdcard from '@/components/card/xdcard.vue'
	import * as utils from '@/utils/utils.js'
	import * as manageApi from '@/api/manage.js'
	import show from '@/common/show.js'
	export default {
		components: {
			xdcard: xdcard
		},
		data() {
			return {
				// 表单数据
				formData: {
					name: '',
					count: 30,
					validity: 1,
					bottomTitle: '欢迎来店洽谈，联系电话：150******',
					createDate: '',
					validityDate: '',
				},
				// 校验规则
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '卡名不能为空'
						}]
					},
					count: {
						rules: [{
							required: true,
							errorMessage: '计卡格数'
						}, {
							format: 'number',
							errorMessage: '计卡格数只能输入数字'
						}]
					}
				},
				validitys: [{
					text: '不限制',
					value: 1
				}, {
					text: '1个月内',
					value: 2
				}, {
					text: '2个月内',
					value: 3
				}, {
					text: '1年内',
					value: 4
				}]
			}
		},
		onLoad() {
			this.formData.createDate = utils.getDateToday()
			this.getValidityDate()
		},
		onReady() {
			// 设置自定义表单校验规则，必须在节点渲染完毕后执行
			this.$refs['formCard'].setRules(this.rules)
		},
		methods: {
			changeValidity() {
				this.getValidityDate()
			},
			getValidityDate() {
				if (this.formData.validity == 1) {
					this.formData.validityDate = '不限期'
				} else if (this.formData.validity == 2) {
					this.formData.validityDate = utils.getDateNextMonth(1)
				} else if (this.formData.validity == 3) {
					this.formData.validityDate = utils.getDateNextMonth(2)
				} else if (this.formData.validity == 4) {
					this.formData.validityDate = utils.getDateNextYear()
				}
			},
			// 触发提交表单
			submit() {
				this.$refs['formCard'].validate().then(data => {
					console.log('表单数据信息：', data);
					manageApi.create({
						title: data.name,
						bottom_title: data.bottomTitle,
						count: data.count,
						validity: data.validity
					}).then(res=>{
						show.toRedirect('制卡成功','../index/index')
					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-forms-item__inner {
		padding-bottom: 18rpx;
	}

	.container {
		width: 100%;
	}

	.card-form {
		padding: 30rpx;
		background-color: #fff;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}
</style>
